<template>
    <div class="art_list">
        <el-row class="title">
            <el-col :span="23"><div class="grid-content bg-purple"><h1>文章列表</h1></div></el-col>
        </el-row>
        <el-row class="addJob">
            <el-col :span="23"><div class="grid-content bg-purple">
                <router-link to="/article_add"><el-button type="primary">新增文章</el-button></router-link>
            </div></el-col>
        </el-row>
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="title"
            label="标题"
            width="300">
        </el-table-column>
        <el-table-column
            prop="brief"
            label="简介"
            width="300">
        </el-table-column>
        <el-table-column
            prop="views"
            label="浏览量"
            width="150">
        </el-table-column>
        <el-table-column
            prop="stars"
            label="推荐"
            width="150">
        </el-table-column>
        <el-table-column prop="operating" label="操作" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
            <el-dropdown>
                <el-button type="primary">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native.prevent="turn(scope.$index, tableData)">编辑</el-dropdown-item>
                <el-dropdown-item @click.native.prevent="upData(scope.$index, tableData)">上升</el-dropdown-item>
                <el-dropdown-item @click.native.prevent="downData(scope.$index, tableData)">下降</el-dropdown-item>
                <el-dropdown-item @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </template>
        </el-table-column>
		</el-table>
        <div class="page">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="100">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import config from '@/assets/js/config.js'
export default {
    created() {
        this.$require.get(config.newsList,{
            params: {
                page:this.page
            }
        }).then((res) => {
            console.log(res)
            this.tableData = res.data.data.rows;
        }).catch(function (err) {
            console.log("出错了")
        })
    },
    data() {
        return {
            page:0,
            tableData: []
        }
    },
    methods: {
        //删除
        deleteRow(index, rows) {
        // console.log(index, rows)
        // rows.splice(index, 1);
        var idx = rows[index].id;
        // console.log("哈哈",idx)
        this.$submit.post(config.newsDelete,{
            id:idx
        }).then((res) => {
            console.log("删除成功",res)
            this.$require.get(config.newsList,{
                params: {
                    page:this.page
                }
            }).then((result) => {
                console.log(1111,result)
                this.tableData = result.data.data.rows;
            })
        })
      },
      //上升
        upData(index, rows){
            var idx = rows[index].id;
            var order = rows[index].orders;
            console.log("ddd",order)
            this.$submit.post(config.sortNews,{
                move: 1,
                orders: order
            }).then((res)=>{
                console.log("上升成功");
                console.log(res);
                this.$require.get(config.newsList,{
                    params:{
                        page:this.page
                    }
                }).then((result)=>{
                    this.$message('上升成功');
                    this.tableData = result.data.data.rows;
                })
            })
        },
      //下降
      downData(index, rows){
            var idx = rows[index].id;
            var order = rows[index].orders;
            this.$submit.post(config.sortNews,{
                move: -1,
                orders: order
            }).then((res)=>{
                console.log("下降成功");
                console.log(res);
                this.$require.get(config.newsList,{
                    params:{
                        page:this.page
                    }
                }).then((result)=>{
                    this.$message('下降成功');
                    this.tableData = result.data.data.rows;
                })
            })
        },
        //跳转修改页面
        turn(index, rows){
            var idx = rows[index].id;
            console.log(999,idx)
            this.$router.push({
            name: 'article_stg',
                params: {
                    id:idx
                }
            })
        }
    },
}
</script>

<style lang="scss">
.art_list{
        margin-top: 20px;
        padding-left: 20px;
        h1{
            margin-bottom: 30px;
        }
        .el-table .cell{
            white-space: nowrap!important;
        }
        .page{
            margin-top: 40px;
            text-align: center;
        }
    }
</style>
